<template>
  <div class="frame">
    <!-- style="height: 100%" -->
    <Header />
    <!-- 二级导航栏 -->
    <div class="nav banxin">
      <ul @click="dian" ref="nav">
        <li>综 合</li>
        <li>前 端</li>
        <li>后 端</li>
        <li>大 数 据</li>
      </ul>
    </div>
    <!-- 主要展示部分 -->
    <div class="box banxin">
      <!-- 左边 -->
      <div class="left">
        <!-- 左边上面 -->
        <div class="top">
          <el-carousel
            indicator-position="outside"
            style="width: 90%; margin-left: 5%"
          >
            <el-carousel-item v-for="(item, uid) in artic" :key="uid">
              <ul class="article">
                <li @click="artic_Derails(item.article_id)">
                  <div
                    class="excellentBlog"
                    style="overflow: hidden; margin-bottom: 50px"
                  >
                    <span
                      style="float: left; font-size: 20px; font-weight: 500"
                    >
                      <el-button v-if="item.status == 1">优秀博客</el-button>
                      <el-button v-if="item.status == 3"
                        >博客之星</el-button
                      ></span
                    >
                    <span
                      style="float: right; font-size: 20px; font-weight: 500"
                    >
                      <el-button
                        >{{ item.startTime }} 至 {{ item.endTime }}</el-button
                      ></span
                    >
                  </div>
                  <!-- 文章标题 -->
                  <div class="title">{{ item.article_title }}</div>
                  <!-- 文章摘要 -->
                  <div class="abstract">{{ item.article_summary }}</div>
                  <!-- 阅读,评论,点赞 -->
                  <div class="out-box">
                    <div class="box-left">
                      <span class="reading"
                        >{{ item.article_view_count }}
                      </span>
                      <span class="praise">{{ item.article_like_count }} </span>
                      <span class="comments">{{
                        item.article_comment_count
                      }}</span>
                    </div>
                    <div class="box-right">
                      <!-- 用户昵称 -->
                      <span class="user">{{ item.username }}</span>
                      <!-- 发布时间 -->
                      <span class="data">{{
                        timeDetal(item.article_createtime)
                      }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 左边下面 -->
        <div class="bottom">
          <div class="bottom-nav">
            <ul>
              <li><el-button>关注</el-button></li>
              <li><el-button>推荐</el-button></li>
              <li>
                <el-button @click="rankOfDay">日榜</el-button>
              </li>
              <li>
                <el-button @click="rankOfWeek">周榜</el-button>
              </li>
              <li>
                <el-button @click="rankOfMonth">月榜</el-button>
              </li>
            </ul>
          </div>
          <div class="bottom-content">
            <RankLists ref="rank_list" />
          </div>
        </div>
      </div>
      <!-- 右边 推荐博客 -->
      <div class="right" style="overflow: hidden">
        <h2>博客展示</h2>
        <hr />
        <div class="infinite-list-wrapper">
          <ul
            class="list"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
          >
            <!-- <li v-for="i in count" class="list-item" :key="i">{{ i }}</li> -->

            <li
              v-for="(i, uid) in InfiniteArtic"
              :key="uid"
              @click="artic_Derails(i.article_id)"
            >
              <!-- 文章标题 -->
              <div class="title">{{ i.article_title }}</div>
              <!-- 文章摘要 -->
              <div class="abstract">{{ i.article_summary }}</div>
              <!-- 阅读,评论,点赞 -->
              <div class="out-box">
                <div class="box-right">
                  <!-- 用户昵称 -->
                  <span class="user">{{ i.username }}</span>
                  <!-- 发布时间 -->
                  <span class="data">{{
                    timeDetal(i.article_createtime)
                  }}</span>
                </div>
              </div>
            </li>
          </ul>
          <p v-if="loading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer banxin">
      <ul>
        <li v-for="item in testList" :key="item">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
import RankLists from "../../components/RankingList/RankLists.vue";
import { mixin } from "../../mixin";
// import { sendWSPush } from "../../api/websocket";
export default {
  naem: "HomePage",
  mixins: [mixin],
  data() {
    return {
      artic: [], //轮播文章
      InfiniteArtic: [], //无线滚动文章
      count: 0,
      loading: false,
      testValue: "",
      testList: [],
      wsUrl: "ws://192.168.137.1:8889", // ws地址
      websock: null, // ws实例
     
    };
  },
  components: {
    Header,
    RankLists,
  },
  // 无限滚动element
  computed: {
    noMore() {
      return this.count > this.InfiniteArtic.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    // 无限滚动element
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 1;
        this.loading = false;
      }, 2000);
    },

    //跳转个人资料
    ToPersonalData() {
      this.$router.push({
        name: "PersonalData",
      });
      this.instance.close();
    },
    dian(e) {
      e.target.style.color = "#f649bc";
    },
    //判断是否需要提示修改用户信息
    prompt() {
      if (sessionStorage.getItem("LoginMessage")) {
        let userData = JSON.parse(
          sessionStorage.getItem("LoginMessage")
        ).message;
        if (userData.email == userData.username) {
          const h = this.$createElement;
          this.instance = this.$notify({
            title: "提示",
            message: h(
              "p",
              {
                style: "text-align: center;",
              },
              [
                h("b", null, "请完善用户信息！"),
                h("br", null, null),
                h(
                  "button",
                  {
                    class: "btu",
                    on: {
                      click: this.ToPersonalData,
                    },
                  },
                  "完善信息"
                ),
              ]
            ),
            type: "warning",
            duration: 0,
            dangerouslyUseHTMLString: true,
            offset: 100,
          });
        }
      }
    },
    // 加载轮播博客
    LoadShufflingBlog() {
      this.$http({
        method: "post",
        url: "jurisdiction/selectGoodBlogAndBlogStar",
      }).then(({ data }) => {
        console.log("主页面渲染", data);
        this.artic = [];
        this.artic = data.data.article;
        for (var i = 0; i < this.artic.length; i++) {
          this.$set(this.artic[i], "username", data.data.user[i].username);
          this.$set(this.artic[i], "startTime", data.data.startTime[i]);
          this.$set(this.artic[i], "endTime", data.data.endTime[i]);
          this.$set(this.artic[i], "status", data.data.status[i]);
        }
      });
    },
    // 获取博客id,转入查看博客详情
    artic_Derails(id) {
      this.$router.push({
        name: "BlogDetails",
        query: {
          itemid: id,
        },
      });
    },
    // 加载无限滚动
    LoadInfiniteScroll() {
      this.$http({
        method: "post",
        url: "article/selectAllArticle",
      }).then(({ data }) => {
        this.InfiniteArtic = [];
        this.InfiniteArtic = data.data.article;
        for (var i = 0; i < this.InfiniteArtic.length; i++) {
          this.$set(
            this.InfiniteArtic[i],
            "username",
            data.data.user[i].username
          );
        }
      });
    },
    // 日榜
    rankOfDay() {
      this.$refs.rank_list.rankListPage("search/dailyList");
    },
    // 周榜
    rankOfWeek() {
      this.$refs.rank_list.rankListPage("search/weekList");
    },
    // 月榜
    rankOfMonth() {
      this.$refs.rank_list.rankListPage("search/monthList");
    },
  },

  mounted() {
    // 加载轮播博客
    this.LoadShufflingBlog();
    // 加载无线滚动博客
    this.LoadInfiniteScroll();
    this.prompt();
    //创建连接 bind修改this指向回到vue实例
    //监听ws方法
    // sendWSPush("online28");
    // 接收消息
    

    // sendWSPush(
    //   "online" + JSON.parse(sessionStorage.getItem("LoginMessage")).message.uid
    // );
    // window.addEventListener("onmessageWS", this.getSocketData);
    // this.$ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    // this.$ws.addEventListener("close", this.handleWsClose.bind(this), false);
    // this.$ws.addEventListener("error", this.handleWsError.bind(this), false);
    // this.$ws.addEventListener(
    //   "message",
    //   this.handleWsMessage.bind(this),
    //   false
    // );

    // this.$http({
    //   method: "post",
    //   url: "sendWs",
    // }).then(({ data }) => {
    //   console.log("ws连接数据", data);
    // });
  },
  // beforeDestroy() {
  //   window.removeEventListener("onmessageWS", this.getSocketData);
  // },
};
</script>

<style scoped lang="less">
.frame {
  background-color: #fafafa;
}
.bottom-nav a.router-link-active .el-button {
  background-color: #ecf5ff;
  border: 1px solid skyblue;
}
/*二级导航栏 */
.nav {
  /* width: 1400px; */
  height: 100px;
  margin: 40px auto;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  background-color: #fff;
}

.nav ul li {
  float: left;
  line-height: 100px;
  padding: 0 50px;
  font-size: 30px;
  cursor: pointer;
  margin-right: 5px;
  font-weight: 700;
}
.nav ul li:hover {
  color: rgb(106, 107, 107);
}
.nav ul li:nth-child(1) {
  color: #f649bc;
}
/* 主要展示部分 */
.box {
  box-sizing: border-box;
  /* width: 1400px; */
  /* height: 2000px; */
  margin: 0 auto;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  display: flex;
  background-color: #fff;
}
/* 左边 */
.left {
  flex: 7;
  /* height: 100%; */
}
/* 内容区域轮播图 */
.top {
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  height: 380px;
  margin: 20px;
  padding-top: 40px;
  box-sizing: border-box;
  // background-color: pink;
}

.el-carousel__item:nth-child(2n) {
  background-color: #d3dce6;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.article {
  height: 100%;
  margin-top: -10px !important;
  background: url(../../assets/bg1.png) 100% 100%;
}
.article li {
  cursor: pointer;
  border-bottom: 1px solid rgb(240, 239, 239);
  padding: 30px 50px;
  margin: 10px 0 30px 0;
}
.left .article .title {
  font-size: 25px;
  font-weight: 700;
  /* margin-bottom: 10px; */
}
.left .article .abstract {
  font-size: 16px;
  color: #aaaaaa;
  margin: 15px 0;
}
.reading,
.praise,
.comments,
.user,
.data {
  color: #aaaaaa;
  display: inline-block;
  margin: 0 40px 0px 0;
  font-size: 18px;
}
.reading::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e62b";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.praise::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\ec7f";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 20px;
}
.comments::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e8b9";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 5px;
  font-size: 18px;
}
.out-box {
  height: 30px;
  position: relative;
}
.box-left {
  position: absolute;
  left: 0;
}
.box-right {
  position: absolute;
  right: 0;
}
/* 内容区域导航栏 */
.bottom-nav {
  height: 80px;
  margin: 20px;
  /* background-color: skyblue; */
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
}
.bottom-nav ul li {
  float: left;
  line-height: 80px;
  padding: 0 40px;
  font-size: 30px;
  cursor: pointer;
  margin-right: 5px;
  font-weight: 700;
}

/* 导航栏下面 */
.bottom-content {
  height: 800px;
  margin: 20px;
  /* background-color: deeppink; */
}
/* 右边图片 */
.right {
  height: 1250px;
  opacity: 0.8;
  flex: 3;
  // width: 200px;
  box-sizing: border-box;
  margin: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  // background-color: #fafafa;

  .list .title {
    font-size: 25px;
    font-weight: 700;
    /* margin-bottom: 10px; */
  }
  .list .abstract {
    font-size: 16px;
    color: #aaaaaa;
    margin: 15px 0;
  }
  .infinite-list-wrapper {
    width: 105%;
    height: 100%;
    overflow: auto;
  }
  h2 {
    margin: 10px 0px;
    margin-left: 20px;
    letter-spacing: 5px;
  }
}
li {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgb(240, 239, 239);
  margin: 10px 0 20px 0;
}
/* 底部footer */
.footer {
  box-sizing: border-box;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  margin: 30px auto;
  height: 250px;
  background-color: #fff;
}
// 弹框样式
.btu {
  padding: 5px 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  margin-top: 20px;
  border-radius: 20px;
  text-align: center;
  min-width: 80px;
}
// .right {
//   padding: 10px;
//   h2 {
//     letter-spacing: 5px;
//     // padding-left: 20px;
//     margin-top: 10px;
//   }
//   .article {
//     width: 100%;
//     margin-top: 20px;
//     li {
//       cursor: pointer;
//       width: 100%;
//       // height: 145px;
//       border-bottom: 1px solid #e4e7ed;
//       color: #4b4a4a;
//       position: relative;
//       .title {
//         width: 195px;
//         font-size: 20px;
//         letter-spacing: 2px;
//         // margin: 10px 0px;
//         color: #302f2f;
//         display: inline-block;
//         vertical-align: top;
//         height: 25px;
//         overflow: hidden;
//         white-space: nowrap;
//         text-overflow: ellipsis;
//         -o-text-overflow: ellipsis;
//         &:hover {
//           color: orangered;
//         }
//       }
//       .abstract {
//         height: 50px;
//         width: 195px;
//         height: 70px;
//         position: absolute;
//         top: 29px;
//         right: 8px;
//         box-sizing: border-box;
//         padding: 5px;
//         font-size: 14px;
//         overflow: hidden;
//         text-overflow: ellipsis;
//         -o-text-overflow: ellipsis;
//       }
//       .other {
//         font-size: 14px;
//         margin-top: 10px;
//         margin-bottom: 10px;
//       }
//       img {
//         width: 150px;
//         height: 100px;
//         background-color: pink;
//         margin-right: 15px;
//       }
//       .noPicture {
//         .title {
//           width: 365px;
//           margin-top: 5px;
//           overflow: hidden;
//           white-space: nowrap;
//           text-overflow: ellipsis;
//           -o-text-overflow: ellipsis;
//           height: 27px;
//         }
//         .abstract {
//           width: 365px;
//           height: 60px;
//           position: static;
//           top: 0;
//           right: 0;
//           padding: 0;
//           margin-top: 10px;
//           overflow: hidden;
//           text-overflow: ellipsis;
//           -o-text-overflow: ellipsis;
//         }
//       }
//     }
//   }
// }
</style>